<!--
 * @Author: YuA
 * @Date: 2021-08-08 15:06:00
 * @LastEditTime: 2021-11-29 22:45:55
 * @FilePath: \front-end\src\view\loading\Loading.vue
-->
<template>
  <div class="loading">
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
  </div>
</template>

<script>
export default {
  name: "Loading",
  mounted() {
    this.goHome();
  },
  methods: {
    goHome() {
      setTimeout(() => {
        this.$router.push("/home");
      }, 2000);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .loading
    display flex
    justify-content center
    align-items center
    height 70vh
    for i in (1..5)
      .loading-item:nth-child({i})
        animation-delay i * 0.2s


.loading-item
  width 30px
  height 140px
  margin-left 20px

  border-radius 50px
  background-color pink

  animation identifier 1s linear infinite


  @keyframes identifier {
    0%,100% {
      height 140px
    }
    20% {
      height 100px
    }
    40% {
      height 60px
    }
    60% {
      height 40px
    }
    80% {
      height 20px
    }
  }
</style>
